<template>
    <el-dialog class="eldialog" title="人员调整" :visible.sync="open" width="30%" append-to-body :before-close="closeDialog">
        <el-form ref="form" :model="form" label-width="80px" :rules="rules">
            <el-form-item label="任务名称" prop="renwuname">
                <el-input v-model="form.renwuname" style="width:300px" disabled></el-input>
            </el-form-item>
            <el-form-item label="审批状态" prop="type">
                <el-select v-model="form.type" placeholder="请选择" style="width:300px" @change="selectChange">
                    <el-option label="初审人员" value="chushen"></el-option>
                    <el-option label="复审人员" value="fushen"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="调整前" prop="olduser">
                <el-select v-model="form.olduser" placeholder="请选择" style="width:300px">
                    <el-option v-for="item in userTreeList" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="调整后" prop="newuser">
                <treeselect v-model="form.newuser" :options="userTreeNewList" :show-count="true" placeholder="请选择" noResultsText="暂无数据" noOptionsText="暂无数据" :normalizer="normalizer"
                    :disable-branch-nodes="true" @input="changeP"  :style="isStyle?'width:300px;height: 32px; line-height: 32px;font-size:12px':'width:300px;height: 36px; line-height: 36px;font-size:14px'"   />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">保存</el-button>
                <el-button @click="closeDialog">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</template>
<script>
import { getuser, getusertree, tzry,getuserbyrenwuid } from "@/api/archive/archivalAppraisal/classificationIdentify/openArchivesAppraisal"
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
export default {
    props: ['open', "rowInfo"],
    components: { Treeselect },
    watch: {
        rowInfo: {
            handler(valNew) {
                if (valNew) {
                    this.form.renwuname = valNew.JIANDINGRENWUNAME
                    this.form.renwuid = valNew.ID
                    if (this.$store.getters.size == 'small') {

                   this.isStyle = true

               } else {

                   this.isStyle = false
               }
                }
            }, immediate: true
        },
    },
    data() {
        return {
            isStyle:"",
            form: {
                renwuid: undefined,
                renwuname: undefined,
                olduser: undefined,
                type: undefined,
                newuser: undefined
            },
            userTreeList: [],
            userTreeNewList: [],
            rules: {
                renwuname: [
                    { required: true, message: '请输入活动名称', trigger: 'blur' },
                ],
                type: [
                    { required: true, message: '请选择审批状态', trigger: 'change' }
                ],
                olduser: [
                    { required: true, message: '请选择调整前', trigger: 'change' }
                ],
                newuser: [
                    { required: true, message: '请选择调整后', trigger: 'change' }
                ]
            }
        }
    },
    methods: {
        closeDialog() {
            this.$emit("closeDialog")
        },
        //获取人员树
        getusertreeList() {
            getusertree().then(res => {
                // console.log(res, "sdlkfjkl")
                this.userTreeNewList = res.data;
            })
        },
        // 只能选择数据下面有children 的数据，没有children的时候禁用复选框
        normalizer(node) {
            if (node.type == 'd') {
                if (node.children == undefined||node.children == null||!node.children.length) {
                    node["children"] = undefined
                    node['isDisabled'] = true;
                }

            }

            if(node.type=='u'){
                if (node.children == null || node.children == undefined) {
                delete node.children;
                }
                
            }
            return node
        },
        //0: 初审手动分配,1:初审平均分配 2:复审手动分配,3:复审平均分配人员下拉列表
        getuserPOST() {
            getuserbyrenwuid({ type: this.form.type, id: this.rowInfo.ID }).then(res => {
                var USERID = res.data.USERID.split(",");
                var USERNAME = res.data.USERNAME.split(",");
                var list = [];
                for (var i in USERID) {
                    list.push({
                        value: USERID[i],
                        label: USERNAME[i]
                    })
                }
                this.userTreeList = list
            })
        },

        //审批状态下拉事件
        selectChange() {
            this.getuserPOST()
            this.getusertreeList();
        },
             // 验证时给 treeselect 组件加红框方法
             formItemVerify(formDom) {
            let inputDomArr = formDom.$el.getElementsByClassName('is-required')
            console.log(formDom.$el, inputDomArr, "____")
            for (let i = 0; i < inputDomArr.length; i++) {
                // vuetreeselect组件
                if (inputDomArr[i].getElementsByClassName('vue-treeselect__control')[0] !== undefined && !inputDomArr[i].classList.contains('is-success')) {
                    inputDomArr[i].getElementsByClassName('vue-treeselect__control')[0].classList.add('treeselectBiTian')
                }
            }
        },
        // 去除校验
        changeP() {
            this.$nextTick(() => {
                this.$refs.form.validateField('newuser')
                // 清除红框
                this.removeBorder()
            })
        },
        // 去除 treeselect 校验红框
        removeBorder() {
            this.$nextTick(() => {
                let inputDomArr = this.$refs.form.$el.getElementsByClassName('is-success')

                for (let i = 0; i < inputDomArr.length; i++) {
                    inputDomArr[i].getElementsByClassName('vue-treeselect__control'[0], 'inputDomArr')
                    // vuetreeselect组件
                    if (inputDomArr[i].getElementsByClassName('vue-treeselect__control')[0] !== undefined) {
                        inputDomArr[i].getElementsByClassName('vue-treeselect__control')[0].classList.remove('treeselectBiTian')
                    }
                }
            })
        },
        onSubmit() {
            var that=this;
            this.$refs.form.validate((valid) => {
                if (valid) {
                    tzry(this.form).then(res => {
                        // console.log(res, "111")
                        if(res.code=="200"){
                            that.$modal.msgSuccess("操作成功");
                            that.closeDialog();
                        }

                    })
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        }
    }
}
</script>
<style  >
.treeselectBiTian {
    width: 100%;
    border: 1px solid red;
}

 .vue-treeselect__control {
    height: inherit;
}

 .vue-treeselect__placeholder,
.vue-treeselect__single-value {
    line-height: inherit;
}

</style>
